<template>
  <div class="app-cat">
    <section class="cart-empty">
      <ul class="empty-content">
        <li class="img-cart">
          <shopping-cart-outlined />
        </li>
        <li class="item-text">
          <p>您的购物车空空的哦~</p>
          <p>去看看喜欢的宝贝吧~</p>
        </li>
        <li class="item-btn">
          <router-link to="/category" class="hairline-btn" tag="span">马上去</router-link>
        </li>
      </ul>
    </section>
    <div>
      <div class="order-card">
        <van-checkbox v-model="checked" checked-color="#91C95B">
          <div class="store-info">
            <span>店铺名称</span>
          </div>
        </van-checkbox>
        <van-checkbox-group v-model="result" class="order-list">
          <ul v-for="(item, index) in lists" :key="index">
            <div class="order-info">
              <li class="check-item">
                <van-checkbox :key="index" checked-color="#91C95B" :name="item" />
              </li>
              <img :src="item.imgSrc" />
              <li class="order-detail">
                <ul>
                  <li class="info-one">
                    <span>{{ item.desc }}</span>
                  </li>
                  <li class="info-two">
                    <span>{{ item.info }}</span>
                  </li>
                </ul>
                <div class="info-count">
                  <span>{{ item.price }}</span>
                  <van-stepper v-model="stepperValue" />
                </div>
              </li>
            </div>
            <div class="order-total">
              <label>合计：</label>
              <span>{{ item.total }}</span>
            </div>
          </ul>
        </van-checkbox-group>
      </div>
      <!-- /商品列表 -->
    </div>

    <div>
      <section v-if="cartMode" class="options-edit">
        <van-submit-bar :price="20000" button-text="结算" @submit="submitSettlement">
          <van-checkbox v-model="checked" checked-color="#91C95B">全选</van-checkbox>
        </van-submit-bar>
      </section>
      <section v-else class="options-delete">
        <van-submit-bar button-text="删除" @submit="submitDelete">
          <van-checkbox v-model="checked" checked-color="#91C95B">全选</van-checkbox>
        </van-submit-bar>
      </section>
    </div>
    <!-- /结算 -->
  </div>
</template>

<script>
import './index.scss'
import { ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ShoppingCartOutlined } from '@ant-design/icons-vue'

export default {
  name: 'Cart',
  components: {
    ShoppingCartOutlined,
  },
  setup() {
    const { ctx } = getCurrentInstance()
    const router = useRouter()
    console.log(ctx)
    console.log(router)

    const clearCart = ref(false)
    const columns = ref(1)
    const cartMode = ref(true)
    const show = ref(false)
    const checked = ref(false)
    const stepperValue = ref('')

    const lists = [
      {
        imgSrc: 'https://img12.360buyimg.com/n2/s240x240_jfs/t1/181100/37/14127/162563/60efedd3E400ba5b8/d9e971c3a20f4369.jpg!q70.jpg',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
      {
        imgSrc: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/171850/32/19715/161350/60f05e81Eb1f3fda3/c4dac5e83836dd7a.jpg!q80.dpg.webp',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
      {
        imgSrc: 'https://img12.360buyimg.com/n2/s240x240_jfs/t1/181100/37/14127/162563/60efedd3E400ba5b8/d9e971c3a20f4369.jpg!q70.jpg',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
      {
        imgSrc: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/171850/32/19715/161350/60f05e81Eb1f3fda3/c4dac5e83836dd7a.jpg!q80.dpg.webp',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
      {
        imgSrc: 'https://img12.360buyimg.com/n2/s240x240_jfs/t1/181100/37/14127/162563/60efedd3E400ba5b8/d9e971c3a20f4369.jpg!q70.jpg',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
      {
        imgSrc: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/171850/32/19715/161350/60f05e81Eb1f3fda3/c4dac5e83836dd7a.jpg!q80.dpg.webp',
        info: '型号;规格;颜色;',
        price: '￥200',
        total: '123000',
        desc: '三彩预售新款短裙淑女裙淑女裙淑女裙淑女',
      },
    ]

    return {
      clearCart,
      columns,
      cartMode, // 购物车的模式，true 是显示出编辑按钮 false 是显示完成按钮,默认是false;
      show,
      checked,
      stepperValue,
      lists,
    }
  },
}
</script>

<style lang="scss"></style>
